<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核重</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/css/bootstrap.min.css"/>
    <script src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/bootstrap.min.js"></script>
    <script src="/resources/layui/css/layui.css"></script>
    <script src="/resources/layui/layui.js"></script>
    <script src="/resources/js/vue.js"></script>
    <script src="/resources/js/bootstrap.js"></script>
</head>
<body>
<div class="table-responsive">
    <h4>信息</h4>
    <table class="table table-bordered table-striped">
        <tbody>
        <tr >
            <td>单号：</td>
            <td> <input type="text" name="id" id="idk" placeholder="单号" autocomplete="off" class="layui-input" disabled></td>
            <td>原件数：</td>
            <td> <input type="text" name="hpCount" id="js" placeholder="原件数" autocomplete="off" class="layui-input" disabled onkeyup="sum(this);"></td>
            <td>原重量：</td>
            <td> <input type="text" name="hpZhongliang" id="yz" placeholder="原重量" autocomplete="off" class="layui-input" disabled onkeyup="sum(this);"></td>
            <td>到达地：</td>
            <td> <input type="text" name="address" id="address" placeholder="到达地" autocomplete="off" class="layui-input" disabled></td>
        </tr>
        </tbody>
    </table>
</div>

<div>
    <h4>数值</h4>
    <table class="table table-bordered table-striped">
        <tbody>
        <tr >
            <td>已核(件)：</td>
            <td> <input type="text" name="jgjs" id="chaj" placeholder="已核" autocomplete="off" class="layui-input"></td>
            <td>已核重(KG)：</td>
            <td> <input type="text" name="jgzl" id="chaz" placeholder="已核重" autocomplete="off" class="layui-input"></td>
            <td>重量差(KG): </td>
            <td colspan="3"> <input type="text" name="chazhi" id="chazhi" placeholder="重量差" autocomplete="off" class="layui-input"></td>
        </tr>
        </tbody>
    </table>
</div>

<div>
    <h4>核对</h4>
    <table class="table table-bordered table-striped">
        <tbody>
        <tr >
            <td>工单号：</td>
            <td> <input type="text" name="hddh" id="dh" placeholder="工单号" autocomplete="off" class="layui-input"></td>
            <td>件数：</td>
            <td> <input type="text" name="hdjs" id="hj" placeholder="件数" autocomplete="off" class="layui-input" onkeyup="sum(this);"></td>
            <td>重量(KG)：</td>
            <td> <input type="text" name="hdzl" id="hc" placeholder="重量差" autocomplete="off" class="layui-input" onkeyup="sum(this);"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
    </table>
</div>

<table id="demo" lay-filter="test"></table>
</body>
</html>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: 'http://localhost:8888/hezong/list' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field:'xuan',type:'radio'}
                ,{field: 'id', title: '单号'}
                ,{field: 'hpCount', title: '件数'}
                ,{field: 'hpZhongliang', title: '本次重量'}
                ,{field: 'qDeta', title: '操作时间'}
                ,{field: 'Integer', title: '操作人'}
            ]]
        });

    });
</script>

<script>
    var table,layer;
    layui.use('table', function(){
        table = layui.table;
        layer=layui.layer;
        table.on('radio(test)',function (obj) {
            var data=obj.data;
            $("#idk").val(data.id);
            $("#js").val(data.hpCount);
            $("#yz").val(data.hpZhongliang);
            $("#address").val(data.address);
         });
    });
</script>

<script>
    function sum(obj) {
        //结果
        var chaj = document.getElementById("chaj");//结果件数
        var chaz =document.getElementById("chaz");//结果重量
        var chazhi =document.getElementById("chazhi");//相差数量
// -------------------------------------------------------------------------------------
        // 原本数据
        var js = document.getElementById("js");//原本件数（订单数据）
        var yz = document.getElementById("yz");//原本重量（订单数据）

        //填写数据
        var hj = document.getElementById("hj");//填写的件数
        var hc = document.getElementById("hc");//填写的重量
        //要实现的是
        //hj（填写的件数）-js（原本件数）=chaj（结果件数）
        //hc（填写的重量）+yz（原本重量）=chaz（结果重量）
        //hc（填写的重量）-yz（原本重量）=chzahi（相差数量）
// ----------------------------------------------------------------------------------------
        //计算过后的结果
        chaj.value=parseInt(chaj.value);
        chaz.value=parseInt(chaz.value);
        chazhi.value=parseInt(chazhi.value);
        // all.value=parseInt(chazhi.value);
// -----------------------------------------------------------------------------------------
        if(hj.value!=''&&js.value!="")
        {
            chaj.value = parseInt(hj.value)-parseInt(js.value);
            // y.value=parseInt(a.value);
            // h.value=parseInt(z.value)-parseInt(a.value);
        }
        if(hc.value!='')
        {
            chaz.value = parseInt(hc.value)
            // y.value=parseInt(b.value)+parseInt(a.value);
            // h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value);
        }
        if(hc.value!=''&&yz.value!='')
        {
            chazhi.value = parseInt(hc.value)-parseInt(yz.value);
            // y.value=parseInt(b.value)+parseInt(a.value)+parseInt(c.value);
            // h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value)-parseInt(c.value);
        }
    }
</script>